import React from 'react'
import {Route} from 'react-router-dom'
import News from '../news/index'
import Index from '../index/index'
import Findhouse from '../findhouse/index'
import Profile from '../profile/index'
import { TabBar } from 'antd-mobile'

import './index.css'

export default class Home extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedTab: this.props.history.location.pathname,
    }
  }

  tabItems = [{
    title: '首页',
    icon: 'icon-ind',
    path: '/home'
  },
  {
      title: '找房',
      icon: 'icon-findHouse',
      path: '/home/list'
  },
  {
      title: '资讯',
      icon: 'icon-infom',
      path: '/home/news'
  },
  {
      title: '我的',
      icon: 'icon-my',
      path: '/home/profile'
  }]

  renderItem() {
    return (
      <TabBar
        unselectedTintColor="#949494"
        tintColor="#21b97a"
        noRenderContent={true}
      >
        {
          this.tabItems.map(item => {
            return (
              <TabBar.Item
                title={item.title}
                key={item.icon}
                icon={<i className={`iconfont ${item.icon}`} />}
                selectedIcon={<i className={`iconfont ${item.icon}`} />}
                selected={this.state.selectedTab === item.path }
                onPress={() => {
                  this.setState({
                    selectedTab: item.path,
                  })
                  this.props.history.push(item.path)
                }}
              />
            )
          })
        }
      </TabBar>
    )
  }

  render() {
    return (
      <div style={ { overflow: 'hidden', paddingBottom: '50px' } }>
        <Route path="/home" exact component={Index} />
        <Route path="/home/list" component={Findhouse} />
        <Route path="/home/news" component={News} />
        <Route path="/home/profile" component={Profile} />

        { this.renderItem() }
      </div>
    )
  }

  componentDidUpdate(prveProps, prevState) {
    if(prveProps.location.pathname !== this.props.location.pathname) {
      this.setState({
        selectedTab: this.props.location.pathname
      })
    }
  }
}